<template>
  <a-button type="link" @click="showModal1">登录</a-button>
  <a-button id="btn2" @click="showModal2">注册</a-button>
  <a-modal
    class="amodal"
    :footer="null"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-tabs v-model:activeKey="activeKey" style="margin: 0 50px 0 50px">
      <a-tab-pane key="1" tab="密码登录"> 
        <vLogon1></vLogon1>
      </a-tab-pane>
      <a-tab-pane key="3" tab="验证登录"> 
        <vLogon2></vLogon2>
      </a-tab-pane>
      <a-tab-pane key="2" tab="注册" force-render> 
        <vRegister></vRegister>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { defineComponent, ref } from "vue";
import vLogon1 from "./Logon1";
import vLogon2 from "./Logon2";
import vRegister from "./Register";
import VueEvent from "../../utils/event";

export default defineComponent({
  setup() {
    let visible = ref(false);
    const confirmLoading = ref(false);
    let activeKey = ref("1");

    const handleOk = () => {
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };

    const showModal1 = () => {
      visible.value = true;
      activeKey.value = "1";
    };

    const showModal2 = () => {
      visible.value = true;
      activeKey.value = "2";
    };

    VueEvent.on("login", () => {
      visible.value = false;
    });

    return {
      visible,
      confirmLoading,
      handleOk,
      showModal1,
      showModal2,
      activeKey,
    };
  },
  components: {
    vLogon1,
    vLogon2,
    vRegister,
  },
});
</script>

<style scoped>
#btn2 {
  margin-right: 10px;
}
</style>